<template>
  <span tabIndex="-1">
    <span
      v-if="Group.Type == 'Group'"
      :id="keyID"
      :class="[
        'filter-group',
        isMobile ? 'filter-group-mobile' : 'filter-group-pc',
        Group.IsOff ? 'filter-group-off' : '',
      ]"
    >
      <span
        v-if="ItemIndex > 0 || !!IsOuter"
        @visible-change="relationvisiblechange"
      >
        <span
          @mouseover="mouseOver"
          @mouseout="mouseOut"
          :class="[
            'filter-relation',
            ItemIndex == 0 ? 'filter-relation-first' : '',
            Group.Relation == 'or'
              ? 'filter-relation-or'
              : 'filter-relation-and',
          ]"
          ref="filter-relation-oper"
          :tabIndex="tabIndex"
        >
          {{
            GroupIndex == 0
              ? Term.Relation.while
              : Group.Relation == 'and'
                ? Term.Relation.and
                : Term.Relation.or
          }}<div :id="operID" class="adj-oper-panel">
            <div
              class="adj-oper-item"
              :title="
                Group.Relation == 'and'
                  ? `${Term.title.switch}  ${Term.title.conditionGroup}   ${Term.title.to} “${Term.Relation.or}”`
                  : `${Term.title.switch}  ${Term.title.conditionGroup}   ${Term.title.to} “${Term.Relation.and}”`
              "
              @click="fasterRelationClick"
              :tabIndex="tabIndex"
            >
              {{
                Group.Relation == 'and' ? Term.Relation.or : Term.Relation.and
              }}
            </div>
            <div
              class="adj-oper-item"
              :title="Term.field.add"
              :tabIndex="tabIndex"
              @click="fasterItemClick"
            >
              <svg
                data-v-b93e0080=""
                viewBox="-5 -6 76.8 26"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                class="svg-icon"
              >
                <path
                  data-v-b93e0080=""
                  d="M5.25,9.44,0,22.56H2.57L4,19H8.88l1.44,3.58H12.9L7.64,9.44ZM5,16.59l1.48-3.71,1.5,3.71Zm27-2.83a3.55,3.55,0,0,0-3.56-3.55H21.32V22.07h7.11a3.56,3.56,0,0,0,2.66-5.94A3.47,3.47,0,0,0,32,13.76Zm-3.56,5.93H23.68V17.32h4.75a1.19,1.19,0,1,1,0,2.37Zm0-4.75H23.68V12.57h4.75a1.19,1.19,0,1,1,0,2.37Zm-14.6.47h5.5v-2.2h-5.5Zm0,4.11h5.5v-2.2h-5.5Z"
                  transform="translate(0 -9.44)"
                ></path>
              </svg>
            </div>
            <div
              class="adj-oper-item"
              :title="Term.field.addGroup"
              :tabIndex="tabIndex"
              @click="fasterGroupClick"
            >
              <svg
                data-v-b93e0080=""
                viewBox="-4 -4 60 22"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                class="svg-icon"
              >
                <path
                  data-v-b93e0080=""
                  d="M9,2,5.45,14.36H7.18l1-3.37h3.28l1,3.37h1.7L10.58,2Zm-.2,6.75L9.84,5.25l1,3.49Zm5.94,2.76h3.7V9.43H14.75Zm0-3.87h3.7V5.56H14.75Zm11.58.68a4.14,4.14,0,0,0,.62-2.24c0-1.84-1.06-3.34-2.39-3.34H19.77V13.9h4.78c1.32,0,2.39-1.49,2.4-3.34a4.17,4.17,0,0,0-.62-2.25Zm-1.62,3.35H21.36V9.43h3.18c.44-.06.83.39.87,1S25.13,11.6,24.68,11.66Zm0-4.47H21.36V5h3.18c.44,0,.83.4.87,1A1.06,1.06,0,0,1,24.68,7.19ZM1.92,1.37A14.24,14.24,0,0,0,0,8.55a12,12,0,0,0,1.92,7.13H3.18A15.13,15.13,0,0,1,1.39,8.55,15.76,15.76,0,0,1,3.18,1.37Zm28.16,0H28.82a15.76,15.76,0,0,1,1.79,7.18,15.13,15.13,0,0,1-1.79,7.13h1.26A12,12,0,0,0,32,8.55,14.24,14.24,0,0,0,30.08,1.37Z"
                  transform="translate(0 -1.37)"
                ></path>
              </svg>
            </div>
            <div
              class="adj-oper-item"
              :title="
                Group.IsOff
                  ? `${Term.title.enable} ${Term.title.conditionGroup}`
                  : `${Term.title.disable} ${Term.title.conditionGroup}`
              "
              @click="fasterSwitchClick"
              :tabIndex="tabIndex"
            >
              <svg
                class="svg-icon"
                viewBox="-7 -4 50 28"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  :d="
                    Group.IsOff
                      ? 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23ZM9.14,10.59A5.41,5.41,0,1,0,14.55,16,5.41,5.41,0,0,0,9.14,10.59Zm0,9A3.56,3.56,0,1,1,12.69,16,3.56,3.56,0,0,1,9.14,19.56Z'
                      : 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23Zm-.34-12.45A5.41,5.41,0,1,0,28.27,16,5.42,5.42,0,0,0,22.86,10.59Zm0,9A3.56,3.56,0,1,1,26.42,16,3.56,3.56,0,0,1,22.86,19.56Z'
                  "
                  transform="translate(0 -7.2)"
                ></path>
              </svg>
            </div>
            <div
              class="adj-oper-item"
              :title="`${Term.title.delete} ${Term.title.conditionGroup}`"
              @click="fasterDeleteClick"
              :tabIndex="tabIndex"
            >
              <q-icon name="clear" size="14px"></q-icon>
            </div>
          </div>
        </span>

        <q-menu
          transition-show="jump-down"
          transition-hide="jump-up"
          v-model="visibleOperateMoreMenu"
        >
          <div class="tr-filter-menu row no-wrap q-pa-md">
            <div class="operateMore">
              <div class="m-list" ref="operateMoreList" style="min-width: 90px">
                <div
                  class="item"
                  style="padding: 0"
                  clickable
                  :class="{
                    'z-on': Group.Relation == 'and',
                  }"
                  @click="relationCommand('and')"
                  @keyup.enter="relationCommand('and')"
                  :tabIndex="tabIndex"
                >
                  <div
                    class="tr-filter-menu-item"
                    :class="{
                      'z-disabled': Group.IsOff || parentIsOff,
                    }"
                    :title="`${Term.title.switch} ${Term.title.to} ${Term.Relation.and1}`"
                  >
                    <svg
                      class="svg-icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M778.784 594.88l54.88 58.24c-39.552 35.104-71.296 61.984-95.168 80.64 43.296 43.296 94.08 96.32 152.32 159.04h-112l-103.04-107.52c-67.2 50.784-121.728 84.736-163.52 101.92-41.824 17.184-87.36 25.76-136.64 25.76-60.48 0-109.952-17.728-148.416-53.216C188.736 824.32 169.536 780.8 169.536 729.28c0-51.52 17.152-98.752 51.52-141.664 34.336-42.944 81.728-87.936 142.208-134.976-41.792-48.544-69.6-86.08-83.424-112.576C266.016 313.6 259.136 288 259.136 263.36c0-42.56 17.152-77.44 51.52-104.736 34.336-27.232 77.44-40.864 129.344-40.864 51.904 0 94.272 14.56 127.136 43.68 32.832 29.12 49.28 63.104 49.28 101.92 0 27.616-9.536 56.736-28.576 87.36-19.04 30.624-56.544 69.44-112.576 116.48l206.08 211.68a3104.32 3104.32 0 0 0 97.44-84z m-352.768-188.16c72.416-57.504 108.608-105.28 108.608-143.36 0-18.656-9.12-34.88-27.424-48.736-18.304-13.792-41.44-20.704-69.44-20.704s-51.328 6.72-70.016 20.16c-18.656 13.44-28 30.976-28 52.64 0 29.856 28.768 76.544 86.24 140z m-10.112 107.52c-69.44 52.256-114.4 93.504-134.944 123.744-20.544 30.272-30.816 59.36-30.816 87.36 0 28.032 13.088 53.76 39.232 77.28 26.112 23.552 56.352 35.296 90.688 35.296 34.368 0 69.088-8 104.16-24.064 35.104-16.064 80.64-44.256 136.64-84.576l-204.96-215.04z"
                      ></path>
                    </svg>
                    <span style="">{{ Term.Relation.and1 }}</span>
                  </div>
                </div>

                <div
                  class="item"
                  style="padding: 0"
                  :class="{
                    'z-on': Group.Relation == 'or',
                  }"
                  @click="relationCommand('or')"
                  @keyup.enter="relationCommand('or')"
                  :tabIndex="tabIndex"
                >
                  <div
                    class="tr-filter-menu-item"
                    :class="{
                      'z-disabled': Group.IsOff || parentIsOff,
                    }"
                    :title="`${Term.title.switch} ${Term.title.to} ${Term.Relation.or1}`"
                  >
                    <svg
                      class="svg-icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M445.12 98.16v828.85h-63.79V98.16zM636.89 98.15V927H573.1V98.15z"
                      ></path>
                    </svg>
                    <span style="">{{ Term.Relation.or1 }}</span>
                  </div>
                </div>

                <t-separator
                  style="margin: 10px 0"
                  @mouseenter="hideLayoutMenu"
                ></t-separator>

                <div
                  class="item"
                  style="padding: 0"
                  clickable
                  @click="relationCommand('item')"
                  @keyup.enter="relationCommand('item')"
                  :tabIndex="tabIndex"
                >
                  <div
                    class="tr-filter-menu-item"
                    :class="{
                      'z-disabled': Group.IsOff || parentIsOff,
                    }"
                    :title="Term.placeHolder.addItem"
                  >
                    <svg
                      data-v-b93e0080=""
                      viewBox="0 -6 40 26"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      class="svg-icon"
                    >
                      <path
                        data-v-b93e0080=""
                        d="M5.25,9.44,0,22.56H2.57L4,19H8.88l1.44,3.58H12.9L7.64,9.44ZM5,16.59l1.48-3.71,1.5,3.71Zm27-2.83a3.55,3.55,0,0,0-3.56-3.55H21.32V22.07h7.11a3.56,3.56,0,0,0,2.66-5.94A3.47,3.47,0,0,0,32,13.76Zm-3.56,5.93H23.68V17.32h4.75a1.19,1.19,0,1,1,0,2.37Zm0-4.75H23.68V12.57h4.75a1.19,1.19,0,1,1,0,2.37Zm-14.6.47h5.5v-2.2h-5.5Zm0,4.11h5.5v-2.2h-5.5Z"
                        transform="translate(0 -9.44)"
                      ></path>
                    </svg>
                    <span style="">{{ Term.field.add }}</span>
                  </div>
                </div>

                <div
                  class="item"
                  style="padding: 0"
                  clickable
                  @click="relationCommand('group')"
                  @keyup.enter="relationCommand('group')"
                  :tabIndex="tabIndex"
                >
                  <div
                    class="tr-filter-menu-item"
                    :class="{
                      'z-disabled': Group.IsOff || parentIsOff,
                    }"
                    :title="Term.placeHolder.addGroup.value"
                  >
                    <svg
                      data-v-78fef8c0=""
                      viewBox="0 -4 40 22"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      class="svg-icon"
                    >
                      <path
                        data-v-78fef8c0=""
                        d="M9,2,5.45,14.36H7.18l1-3.37h3.28l1,3.37h1.7L10.58,2Zm-.2,6.75L9.84,5.25l1,3.49Zm5.94,2.76h3.7V9.43H14.75Zm0-3.87h3.7V5.56H14.75Zm11.58.68a4.14,4.14,0,0,0,.62-2.24c0-1.84-1.06-3.34-2.39-3.34H19.77V13.9h4.78c1.32,0,2.39-1.49,2.4-3.34a4.17,4.17,0,0,0-.62-2.25Zm-1.62,3.35H21.36V9.43h3.18c.44-.06.83.39.87,1S25.13,11.6,24.68,11.66Zm0-4.47H21.36V5h3.18c.44,0,.83.4.87,1A1.06,1.06,0,0,1,24.68,7.19ZM1.92,1.37A14.24,14.24,0,0,0,0,8.55a12,12,0,0,0,1.92,7.13H3.18A15.13,15.13,0,0,1,1.39,8.55,15.76,15.76,0,0,1,3.18,1.37Zm28.16,0H28.82a15.76,15.76,0,0,1,1.79,7.18,15.13,15.13,0,0,1-1.79,7.13h1.26A12,12,0,0,0,32,8.55,14.24,14.24,0,0,0,30.08,1.37Z"
                        transform="translate(0 -1.37)"
                      ></path>
                    </svg>
                    <span style="">{{ Term.field.addGroup }}</span>
                  </div>
                </div>

                <t-separator
                  style="margin: 10px 0"
                  @mouseenter="hideLayoutMenu"
                ></t-separator>

                <div
                  class="item"
                  style="padding: 0"
                  clickable
                  @click="relationCommand('off')"
                  @keyup.enter="relationCommand('off')"
                  :tabIndex="tabIndex"
                >
                  <div
                    class="tr-filter-menu-item"
                    :title="
                      Group.IsOff ? Term.title.enable : Term.title.disable
                    "
                  >
                    <svg
                      class="svg-icon"
                      viewBox="0 -2 40 28"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        :d="
                          Group.IsOff
                            ? 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23ZM9.14,10.59A5.41,5.41,0,1,0,14.55,16,5.41,5.41,0,0,0,9.14,10.59Zm0,9A3.56,3.56,0,1,1,12.69,16,3.56,3.56,0,0,1,9.14,19.56Z'
                            : 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23Zm-.34-12.45A5.41,5.41,0,1,0,28.27,16,5.42,5.42,0,0,0,22.86,10.59Zm0,9A3.56,3.56,0,1,1,26.42,16,3.56,3.56,0,0,1,22.86,19.56Z'
                        "
                        transform="translate(0 -7.2)"
                      />
                    </svg>
                    <span style="">{{
                      Group.IsOff ? Term.title.enable : Term.title.disable
                    }}</span>
                  </div>
                </div>

                <div
                  class="item"
                  style="padding: 0"
                  clickable
                  @click="relationCommand('del')"
                  @keyup.enter="relationCommand('del')"
                  @keydown.tab="$refs.operateMoreList.focus"
                  :tabIndex="tabIndex"
                >
                  <div class="tr-filter-menu-item" :title="Term.title.delete">
                    <q-icon name="clear" size="14px"></q-icon>
                    <span style="">
                      {{ Term.title.delete }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </q-menu>
      </span>

      <span
        :class="[
          GroupIndex == 0 ? 'filter-item-first' : '',
          Group.Children.length > 1 ? 'filter-list' : 'filter-list',
        ]"
        style="display: inline-block"
      >
        <FilterItem
          v-for="(item, index) in Group.Children"
          :key="item.ID"
          :Filter="item"
          @update:Filter="
            value => $emit('update:GroupChild', { GroupIndex, index, value })
          "
          @focusFilterDivDelayed="$emit('focusFilterDivDelayed')"
          :ItemIndex="index"
          :Group="Group"
          @update:Group="value => $emit('update:Group', { GroupIndex, value })"
          :Groups="Groups"
          @update:Groups="value => $emit('update:Groups', value)"
          :Fields="Fields"
          :Mappings="Mappings"
          :Conditions="Conditions"
          :FilterIsEasy="FilterIsEasy"
          :FilterIsClassic="FilterIsClassic"
          :InitValueScript="InitValueScript"
          :tabIndex="tabIndex"
        >
        </FilterItem>
      </span>
    </span>

    <FilterItem
      v-if="Group.Type == 'Filter'"
      :key="Group.ID"
      :Filter="Group"
      @update:Filter="value => $emit('update:Groups', value)"
      @focusFilterDivDelayed="$emit('focusFilterDivDelayed')"
      :ItemIndex="GroupIndex"
      :Groups="Groups"
      @update:Groups="value => $emit('update:Groups', value)"
      :Group="Group"
      @update:Group="value => $emit('update:Group', { GroupIndex, value })"
      :Fields="Fields"
      :Mappings="Mappings"
      :Conditions="Conditions"
      :FilterIsEasy="FilterIsEasy"
      :FilterIsClassic="FilterIsClassic"
      :IsOuter="IsOuter"
      :InitValueScript="InitValueScript"
      :tabIndex="tabIndex"
      :enableHelpTip="enableHelpTip"
      :helpTipPlacement="helpTipPlacement"
      :helpTipContext ="helpTipContext"
    >
    </FilterItem>
  </span>
</template>

<script>
import _ from 'lodash';
import { useQuasar } from '@teld/q-components';
import { Terms } from './config/resouce';

import QMenu from '@teld/q-components/Menu';
import QIcon from '@teld/q-components/Icon';

import TSeparator from 't/basic/separator/Component';
import TList from 't/basic/list';
import TItem from 't/basic/item';

import FilterItem from './FilterItem';

export default {
  name: 'FilterGroup',
  components: {
    QMenu,
    QIcon,

    TList,
    TItem,
    TSeparator,

    FilterItem,
  },
  props: [
    'IsOuter',
    'Groups',
    'Group',
    'GroupIndex',
    'ItemIndex',
    'Fields',
    'Mappings',
    'Conditions',
    'FilterIsEasy',
    'FilterIsClassic',
    'InitValueScript',
    'tabIndex',
   "enableHelpTip",
       "helpTipPlacement",
            "helpTipContext",
  ],
  data() {
    return {
      Term: Terms,
      tempInfo: null,
      visibleOperateMoreMenu: false,
    };
  },
  watch: {},
  computed: {
    keyID: function () {
      return 'key_' + this.Group.ID;
    },
    operID: function () {
      return 'oper_' + this.Group.ID;
    },
    parentIsOff: function () {
      this.tempInfo = {};
      this.getParentInfo(this.Groups, null);
      return !!this.tempInfo.parent ? this.tempInfo.parent.IsOff : false;
    },
    isMobile() {
      return window.TFF?.common?.cts?.isMobile();
    },
  },

  setup() {
    const { dialog } = useQuasar();
    return {
      notify({ message = '', type = 'info', caption = '' }) {
        Funcs.Notify(caption, message, type);
      },
      dialog,
    };
  },

  methods: {
    relationCommand(command) {
      let _rala = 'or';
      if (this.Group.Children.length == 1) {
        this.Group.Relation == 'or' ? (_rala = 'and') : (_rala = 'or');
      } else if (this.Group.Children.length > 1) {
        _rala = this.Group.Children[this.Group.Children.length - 1].Relation;
      } else {
        _rala = 'and';
      }
      var _id = '';
      switch (command) {
        case 'and':
          this.Group.Relation = 'and';
          break;
        case 'or':
          this.Group.Relation = 'or';
          break;
        case 'off':
          this.Group.IsOff = !this.Group.IsOff;
          break;
        case 'del':
          this.tempInfo = {};
          this.getParentInfo(this.Groups, null);
          (!!this.tempInfo.parent
            ? this.tempInfo.parent.Children
            : this.Groups
          ).splice(this.tempInfo.index, 1);
          this.$emit('focusFilterDivDelayed');
          break;
        case 'item':
          if (this.Fields.length == 0) {
            this.notify({
              message: Terms.Notify.noFilter,
              type: 'warning',
            });
            break;
          }
          let field = this.Fields[0];
          _id = this.getGuid();
          this.Group.Children.push({
            ID: _id,
            Type: 'Filter',
            Relation: _rala,
            Code:
              field.tableAlias +
              '.' +
              (field.tableAlias != '__UserDefineColumns'
                ? field.fieldCode
                : field.fieldAlias),
            Name: field.fieldName,
            Condition: field.dataType == 'String' ? '=' : '=',
            Value:
              this.Mappings[field.dataType] == 'number'
                ? '0'
                : `<${Terms.field.inputValue}>`,
            DataType: field.dataType,
            ValueName:
              this.Mappings[field.dataType] == 'number'
                ? '0'
                : `<${Terms.field.inputValue}>`,
            ValueType: 0,
            IsOff: false,
            Children: [],
          });
          break;
        case 'group':
          if (this.Fields.length == 0) {
            this.notify({
              message: Terms.Notify.noFilter,
              type: 'warning',
            });
            break;
          }
          let _field = this.Fields[0];
          _id = this.getGuid();
          this.Group.Children.push({
            ID: this.getGuid(),
            Type: 'Group',
            Relation: _rala,
            Code: '',
            Name: '',
            Condition: '',
            Value: '',
            DataType: '',
            IsOff: false,
            Children: [
              {
                ID: _id,
                Type: 'Filter',
                Relation: 'and',
                Code:
                  _field.tableAlias +
                  '.' +
                  (_field.tableAlias != '__UserDefineColumns'
                    ? _field.fieldCode
                    : _field.fieldAlias),
                Name: _field.fieldName,
                Condition: _field.dataType == 'String' ? '=' : '=',
                Value:
                  this.Mappings[_field.dataType] == 'number'
                    ? '0'
                    : `<${Terms.field.inputValue}>`,
                DataType: _field.dataType,
                ValueName:
                  this.Mappings[_field.dataType] == 'number'
                    ? '0'
                    : `<${Terms.field.inputValue}>`,
                ValueType: 0,
                IsOff: false,
                Children: [],
              },
            ],
          });
          break;
        default:
          break;
      }
      this.visibleOperateMoreMenu = false;
      if (command == 'item' || command == 'group') {
        //添加新条件，自动选中
        window['filter_change_timer'] = setTimeout(() => {
          let _dom = document.getElementById('filterName_' + _id);
          if (!_dom) {
            return;
          }
          _dom.setSelectionRange(0, 0);
          _dom.setSelectionRange(0, _dom.value.length);
          _dom.focus();
          _dom.click();
        }, 300);
      }
    },
    relationvisiblechange(visible) {
      if (this.GroupIndex != 0) {
        return;
      }
      let _obj = this.$refs['filter-relation-oper'];
      if (visible) {
        this.addClass(_obj, 'filter-relation-active');
        this.removeClass(_obj, 'filter-relation-first');
      } else {
        this.removeClass(_obj, 'filter-relation-active');
        this.addClass(_obj, 'filter-relation-first');
      }
    },
    addClass(obj, cls) {
      let obj_class = obj.className;
      let blank = obj_class != '' ? ' ' : '';
      let added = obj_class + blank + cls;
      obj.className = added;
    },
    removeClass(obj, cls) {
      //获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
      let obj_class = ' ' + obj.className + ' ';

      //将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
      obj_class = obj_class.replace(/(\s+)/gi, ' ');

      //在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
      let removed = obj_class.replace(' ' + cls + ' ', ' ');

      //去掉首尾空格. ex) 'bcd ' -> 'bcd'
      removed = removed.replace(/(^\s+)|(\s+$)/g, '');

      //替换原来的 class.
      obj.className = removed;
    },
    getGuid() {
      function t() {
        return ((65536 * (1 + Math.random())) | 0).toString(16).substring(1);
      }
      return (
        t() + t() + '-' + t() + '-' + t() + '-' + t() + '-' + t() + t() + t()
      );
    },
    getParentInfo(list, parent, info) {
      list.forEach((item, index) => {
        this.getParentInfo(item.Children, item, info);
        if (item.ID == this.Group.ID) {
          this.tempInfo['parent'] = parent;
          this.tempInfo['index'] = index;
          return;
        }
      });
    },
    mouseOver: function (e) {
      if (this.isMobile) {
        return true;
      }
      Array.from(document.getElementsByClassName('adj-oper-panel')).forEach(
        item => (item.style.display = 'none'),
      );
      document.getElementById(this.operID).style.display = 'block';

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    mouseOut: function (e) {
      if (this.isMobile) {
        return true;
      }
      document.getElementById(this.operID).style.display = 'none';

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    fasterRelationClick: function (e) {
      this.relationCommand(this.Group.Relation == 'and' ? 'or' : 'and');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    fasterItemClick: function (e) {
      this.relationCommand('item');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    fasterGroupClick: function (e) {
      this.relationCommand('group');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    fasterSwitchClick: function (e) {
      this.relationCommand('off');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    deleteGroupIfChildrenIsNone() {
      this.$nextTick(() => {
        console.log('====== deleteGroupIfChildrenIsNone', this.Group);
        if (this.Group?.Type == 'Group' && this.Group?.Children?.length == 0) {
          this.relationCommand('del');

          this.$parent.deleteGroupIfChildrenIsNone &&
            this.$parent.deleteGroupIfChildrenIsNone();
        }
      });
    },
    fasterDeleteClick: function (e) {
      this.relationCommand('del');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
  },
};
</script>

<style lang="scss">
.menu-item-cheked {
  background-color: #f0f2f5;
}

.svg-icon {
  height: 14px;
  vertical-align: middle;
  overflow: hidden;
  fill: currentColor;
}
</style>
